<template>
    <div id="topbar">
        <div class="topbarInfo">
           <div class="topbar-item">
               <p>欢迎光临{{$store.state.systemMessage.brand}}官方商城</p>
               <div class="top-main">
                   <div v-if="!islogn">
                       <router-link to="/signIn" class="top-link dl" @click="change">登录</router-link>
                       <router-link to="/register" class="top-link" @click="change">  注册</router-link>
                   </div>
                   <div v-else>
                       <router-link to="/profile" class="top-link">我的账户</router-link>
                       <a href="javascript:void(0)" @click="signOut">退出</a>
                   </div>
               </div>

           </div>
            <div>
                <p>服务热线 xxx-xxx-xxxx</p>
            </div>
        </div>
    </div>
</template>

<script>
    import {signout} from "@/network/user";

    export default {
        name: "TopBar",
        data() {
            return {
                isShow: true
            }
        },
        computed: {
            islogn() {
                return this.$store.getters.islogn
            }
        },
        methods: {
            change() {
                this.isShow = false
            },
            signOut() {
                this.$store.dispatch('signOut');
                window.alert("退出成功！");
                this.$router.push('/');
                window.location.reload()
            }
        },

    }
</script>

<style scoped>
    #topbar {
        background-color: #333333;
        height: 40px;
        width: 100%;
        color: #b0b0b0;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
    }
    .topbarInfo {
        width: 1180px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }
    .top-main {
        display: flex;
        margin-top: 10px;
    }

    .topbar-item {
        display: flex;
        /*width: 250px;*/
        justify-content: space-between;
    }
    .top-main a {
       margin: 0 5px;
        color: #b0b0b0;
        text-decoration: none;
        justify-content: space-between;
    }
    .dl::after {
        content: '';
        width: 0;
        height: 0;
        border-left: 1px solid #b0b0b0;
        margin-left: 5px;
    }
</style>